<template>
    <div class="comment-item">
        <van-cell>
            <template #title>
                <div class="user-name">{{ comment.aut_name }}</div>
            </template>
            <template #icon>
                <van-image round fit="cover" :src="comment.aut_photo" />
            </template>
            <template #default>
                <van-icon 
                    :name="comment.is_liking ? 'good-job' : 'good-job-o'" 
                    :color="comment.is_liking ? '#e5645f' : ''"
                    @click="onCommentLike(comment.com_id)" />
                <span>{{ comment.like_count }}</span>
            </template>
            <template #label>
                <p class="comment-content">{{ comment.content }}</p>
                <div class="other">
                    <span>{{ comment.pubdate | relativeTime }}</span>&nbsp;&nbsp;
                    <van-button type="default" round size="mini" v-show="replyButton" @click="$emit('replyClick', comment)">回复 {{ comment.reply_count }}</van-button>
                </div>
            </template>
        </van-cell>
    </div>
</template>

<script>
import { addCommentLike, deleteCommentLike } from '@/api/comment'

export default {
    name: 'CommentItem',
    props: {
        comment: {
            type: Object,
            required: true
        },
        // 是否显示回复按钮
        replyButton: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        // 对评论点赞
        async onCommentLike(commentId) {
            try {
                if (this.comment.is_liking) {
                    await deleteCommentLike(commentId)
                    this.$toast.success('取消点赞')
                    // 点赞减1
                    this.comment.like_count--
                } else {
                    await addCommentLike(commentId)
                    this.$toast.success('点赞成功')
                    // 点赞加1
                    this.comment.like_count++
                }
                // 更新点赞状态
                this.comment.is_liking = !this.comment.is_liking
            } catch (err) {
                console.log('操作失败', err)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.comment-item {
    .van-cell {
        padding: 20px 0;

        .user-name {
            font-size: 26px;
            color: #406599;
        }

        .van-image {
            margin-right: 24px;
            width: 70px;
            height: 70px;
        }

        .like-comment {
            margin-right: 8px;
        }

        .comment-content {
            color: #222;
            font-size: 30px;
            margin: 0 0 4px;
        }

        .other {
            display: flex;
            align-items: center;

            .van-button {
                color: #969799;
            }
        }
    }
}</style>